<template>
  <div>
    <div class="comment">
      <div class="comment_header">
        <h3>精彩评论 {{ coment }}</h3>
        <div class="header_right">
          <span>{{like}} 赞</span>
          <span>|</span>
          <span>{{fav}} 收藏</span>
        </div>
      </div>
      <van-popup
        v-model="Popupshow"
        round
        position="bottom"
        :style="{ height: '95%' }"
      >
        <ReplyPopup @close="Popupshow = false">
          <CommentInfo
            v-for="item in Replytolist"
            :key="item.id"
            :content="item.content"
            :avatar="item.info.avatar"
            :nickname="item.info.nickname"
            :is_like="item.is_like"
            :like_count="item.like_count"
            :reply_num="item.reply_num"
            :time="item.create_time"
            :_id="item._id"
          ></CommentInfo>
        </ReplyPopup>
      </van-popup>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已经到底了"
        @load="getReplyList"
      >
        <CommentInfo
          v-for="(item, index) in replyList"
          :key="item.id"
          :content="item.content"
          :avatar="item.info.avatar"
          :nickname="item.info.nickname"
          :is_like="item.is_like"
          :like_count="item.like_count"
          :reply_num="item.reply_num"
          :time="item.create_time"
          :_id="item._id"
          @ReplyTwo="getReplyTwo(index)"
        ></CommentInfo>
      </van-list>
    </div>
    <div class="boders"></div>
  </div>
</template>

<script>
import CommentInfo from "./CommentInfo.vue";
import { mapState } from "vuex";
import { replyList, getreplylist } from "@/api/api";
import ReplyPopup from "./ReplyPopup.vue";

export default {
  components: {
    CommentInfo,
    ReplyPopup,
  },
  data() {
    return {
      skip: 0,
      limit: 10,
      loading: false,
      finished: false,
      Popupshow: false,
      replyListTwo: [],
      like: 0, // 点赞
      fav: 0, // 收藏
    };
  },
  props: {
    coment: {},
  },
  methods: {
    getReplyList() {
      let articleList2 = JSON.parse(localStorage.getItem("articleList2"));
      let { skip, limit } = this;
      let { uid: user_id } = localStorage;
      let article_id = articleList2._id;
      let params = { article_id, skip, limit, user_id };

      replyList(params).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          // this.replyList.push(...res.data.data)
          this.$store.commit("getReplyList", res.data.data);
          // console.log(res.data.data);
          let len = this.replyList.length;
          if (len >= res.data.count) {
            this.finished = true;
          } else {
            this.loading = false;
            this.skip = len;
          }
        }
      });
    },
    getReplyTwo(index) {
      this.Popupshow = true;
      let { replyList } = this;
      this.replyListTwo = replyList[index];
      sessionStorage.setItem("reply_comment_id", replyList[index]._id);
      sessionStorage.setItem(
        "replyIndexList",
        JSON.stringify(replyList[index])
      );
      this.$store.commit("replyListTwo", this.replyListTwo);

      let { skip, limit } = this;
      let reply_comment_id = replyList[index]._id;
      let article_id = JSON.parse(localStorage.getItem("articleList2"))._id;
      let { uid: user_id } = localStorage;
      getreplylist(user_id, article_id, skip, limit, reply_comment_id).then(
        (res) => {
          // console.log(res);
          if (res.data.code == 0) {
            this.$store.commit("getreplylist", res.data.data);
          }
        }
      );
    },
  },
  computed: {
    ...mapState(["author_id", "replyList", "Replytolist"]),
  },
  created(){
     let articleList2 = JSON.parse(localStorage.getItem("articleList2"));
    this.like = articleList2.like
    this.fav = articleList2.fav
  }
};
</script>

<style lang="less" scoped>
.boders {
  margin-bottom: 50px;
}
.comment {
  padding: 0 14px;
  width: 100%;
  margin-bottom: 5px;
  line-height: 1.5;
  .comment_header {
    display: flex;
    justify-content: space-between;
    .header_right {
      span {
        margin: 0 5px;
        font-size: 14px;
        color: rgb(161, 158, 158);
      }
    }
  }
}
</style>
